<template>
	<div class="container">
	  <form @submit.prevent="submitForm" class="upload-form">
		<h2>欢迎上传3D模型</h2>
		<div class="form-group">
		  <label for="model-name">模型名称:</label>
		  <input type="text" id="model-name" v-model="modelName" required>
		</div>
		<div class="form-group">
		  <label for="model-classify">模型类别</label>
		  <select id="model-classify" v-model="modelClassify" required>
			<option value="">请选择类别</option>
			<option value="freshwater">淡水鱼类</option>
			<option value="saltwater">海水鱼类</option>
		  </select>
		</div>
		<div class="form-group">
		  <label for="model-image">模型图片:</label>
		  <input type="file" id="model-image" accept="image/*" @change="onModelImageChange" required>
		</div>
		<div class="form-group">
		  <label for="model-file">模型文件:(glb模型)</label>
		  <input type="file" id="model-file" accept=".obj,.stl,.glb" @change="onModelFileChange" required>
		</div>
		<button type="submit" class="submit-button" :disabled="isSubmitting">上传模型</button>
	  </form>
	</div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  // import axios from 'axios';
  import request from '../../api/request'
  
  const modelName = ref('');
  const modelClassify = ref('');
  const modelImage = ref(null);
  const modelFile = ref(null);
  const username = ref('');
  const isSubmitting = ref(false);
  
  onMounted(() => {
	const storedUsername = localStorage.getItem('username');
	if (storedUsername) {
	  username.value = storedUsername;
	}
  });
  
  const submitForm = async () => {
	if (!modelName.value || !modelClassify.value || !modelImage.value || !modelFile.value) {
	  alert('请填写所有必填字段');
	  return;
	}
  
	isSubmitting.value = true;
	
	const formData = new FormData();
	formData.append('model-name', modelName.value);
	formData.append('model-classify', modelClassify.value);
	formData.append('model-image', modelImage.value);
	formData.append('model-file', modelFile.value);
	formData.append('model-user', username.value);
  
	try {
	  const response = await request.post('upload', formData, {
		timeout:20000,
		headers: {
		  'Content-Type': 'multipart/form-data',
		},
	  });
	  console.log('Upload successful:', response);
	  alert('模型上传成功！');
	} catch (error) {
	  console.error('Upload failed:', error);
	  alert('模型上传失败，请重试。');
	} finally {
	  isSubmitting.value = false;
	}
  };
  
  const onModelImageChange = (event) => {
	modelImage.value = event.target.files[0];
  };
  
  const onModelFileChange = (event) => {
	modelFile.value = event.target.files[0];
  };
  </script>
  
  <style scoped>
  .container {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f7f7f7;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .upload-form {
	display: flex;
	flex-direction: column;
  }
  
  .form-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
  }
  
  label {
	margin-bottom: 5px;
	font-weight: bold;
  }
  
  input, select {
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 3px;
  }
  
  .submit-button {
	background-color: #009688;
	color: #fff;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
  }
  
  .submit-button:hover {
	background-color: #00665c;
  }
  
  .submit-button:disabled {
	background-color: #4d4d4d;
	cursor: not-allowed;
  }
  </style>
  
  